<template>
	<view class="guide_wrap">
		<view class="lists_wrap" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/new/daolanbj.png)`}">
			<view class="lists">
				<view class="item" v-for='(item, index) in list' :key='index' @tap="clickGuideList(item,index)">
					<image :src='img_baseUrl+item.selectedLogo' v-if="selecteIndex === index"></image>
					<image :src='img_baseUrl+item.logo' v-else></image>
					<text :class="selecteIndex==index?'active':''">{{item.guidedTypeName}}</text>
				</view>
			</view>
		</view>
		<view class="map_wrap">
			<map class="map" id="myMap" :min-scale="10.61" :longitude="longitude" :latitude="latitude" :scale="scale"
				:markers="markers" @markertap="markertap" :show-location="true" @regionchange="bindregionchange" />
		</view>
		<view class="test" v-if="showModal">
			<view class="det_top" @click="goToDetail(modalData)">
				<view class="tit">
					<view class="tit_bot">
						<text>{{modalData.title}}</text>
						<view class="dis">距您<text>2.3km</text></view>
						<text class="text">{{modalData.guideInfo || ''}}</text>
					</view>
					<image v-if="modalData.imageZoomPath" :src='img_baseUrl+modalData.imageZoomPath' mode='aspectFill'>
					</image>
					
				</view>
				<view class="det_btn">
					<view class="det_wrap" v-if="modalData.soundPath && modalData.soundPath != ''"
						@tap="handleAudio(modalData)">
						<text>语音讲解</text>
						<view class='jg'>|</view>
						<image :src="`${img_baseUrl}/statics/std/static/new/voice.png`"></image>
					</view>
					<view class="det_wrap" v-if="modalData.videoPath && modalData.videoPath != ''" @click="handleVideo">
						<text>视频观看</text>
						<view class='jg'>|</view>
						<image 
							:src="`${img_baseUrl}/statics/std/static/new/bofang-blue.png`"></image>
					</view>
				</view>

			</view>
			
		</view>
		<view class="ad_wrap" :style="{display: showVideo ? 'flex' : 'none'}">
			<view class="ad_img">
				<video id="myVideoShow" object-fit="fill" :src="img_baseUrl + modalData.videoPath"
					@error="videoErrorCallback"></video>
			</view>
			<view @click="closeVideo" class="close">
				<image :src="`${img_baseUrl}/statics/std/static/delete2.png`"></image>
			</view>
		</view>
		<view class="myPositionClass">
      <view class="item" :class="showImage === 0 ? 'active' : ''">
        <image :src="showImage === 0 ? `${img_baseUrl}/statics/std/static/std_change1_a.png` : `${img_baseUrl}/statics/std/static/std_change1.png`" @click="changeImage(0)"></image>
        <text>观览</text>
      </view>
			<view class="item" :class="showImage === 1 ? 'active' : ''">
			  <image :src="showImage === 1 ? `${img_baseUrl}/statics/std/static/std_change2_a.png` : `${img_baseUrl}/statics/std/static/std_change2.png`" @click="changeImage(1)"></image>
			  <text>路线</text>
			</view>
		</view>
		<view class="myPositionClass_bot">
			<image :src="`${img_baseUrl}/statics/std/static/new/currentPosition.png`" @click="getCurrentLocation(true)"></image>
		</view>
		<view v-if="showModeal" class="modealWrap">
			<view class="modealImg">
				<image class="img" mode='aspectFill' :src="modealImg"></image>
        <image class="closeImg" :src="`${img_baseUrl}/statics/std/static/delete2.png`" @click="showModeal = false"></image>
        <!-- <image class="closeImg" src="@/static/delete2.png" @click="showModeal = false"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestGet
	} from '@/utils/request.js';
	var amapFile = require('@/utils/amap-wx.130.js');
	export default {
		data() {
			return {
				stdImage: [process.env.VUE_APP_BASEURL_IMG_API + "/statics/std/static/zmap-V2.0.png", process.env
					.VUE_APP_BASEURL_IMG_API + "/statics/std/static/zmap-2.5Dv3.0.png"
				],
				showImage: 0,
				showImageWay: 0, // 0 拼图方式，1 整图方式
				selecteIndex: 0,
				longitude: 114.516495, //经度
				latitude: 38.145876, //维度
				scale: 14, //地图默认缩放等级
				markers: [], //点位数据
				showModal: false, //弹框显隐
				modalData: {}, //详情信息
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				baseUrl: process.env.VUE_APP_BASEURL_API,
				mapCtx: null,
				list: [],
				phoneHeight: "",
				guideType: "",
				pointLogo: "",
				selectedPointLogo: "",
				audioContext: null,
				ifplay: false,
				showVideo: false,
				// 原来贴图坐标，需保留备用
				// includePoints: [{
				// 	longitude: 114.5052,
				// 	latitude: 38.13667
				// }, {
				// 	longitude: 114.5293,
				// 	latitude: 38.15406
				// }],
				// 0928-贴图坐标
				includePoints: [{
					longitude: 114.50531,
					latitude: 38.13671
				}, {
					longitude: 114.52937,
					latitude: 38.15462
				}],
				imagePoints: [{ //1
					southwest: {
						longitude: 114.50531,
						latitude: 38.14865
					}, //
					northeast: {
						longitude: 114.51333,
						latitude: 38.15462
					}
				}, { //2
					southwest: {
						longitude: 114.51333,
						latitude: 38.14865
					}, //
					northeast: {
						longitude: 114.52135,
						latitude: 38.15462
					} //
				}, { //3
					southwest: {
						longitude: 114.52135,
						latitude: 38.14865
					}, //
					northeast: {
						longitude: 114.52937,
						latitude: 38.15462
					}
				}, { //24
					southwest: {
						longitude: 114.50531,
						latitude: 38.14268
					}, //
					northeast: {
						longitude: 114.51333,
						latitude: 38.14865
					}
				}, { //5
					southwest: {
						longitude: 114.51333,
						latitude: 38.14268
					}, //
					northeast: {
						longitude: 114.52135,
						latitude: 38.14865
					} //
				}, { //6
					southwest: {
						longitude: 114.52135,
						latitude: 38.14268
					}, //
					northeast: {
						longitude: 114.52937,
						latitude: 38.14865
					} //
				}, { //7
					southwest: {
						longitude: 114.50531,
						latitude: 38.13671
					}, //
					northeast: {
						longitude: 114.51333,
						latitude: 38.14268
					} //
				}, { //8
					southwest: {
						longitude: 114.51333,
						latitude: 38.13671
					}, //
					northeast: {
						longitude: 114.52135,
						latitude: 38.14268
					} //
				}, { //9
					southwest: {
						longitude: 114.52135,
						latitude: 38.13671
					}, //
					northeast: {
						longitude: 114.52937,
						latitude: 38.14268
					} //
				}],
				curTime: 0,
				innerAudioContext: null,
				myPosition: null,
				showModeal: false,
				modealImg: null
			}
		},
		onLoad: function(options) { //贴图需真机预览
			this.getNavigation();
		},
		mounted() {
			this.videoNew = uni.createVideoContext('myVideoShow', this)
			this.mapCtx = uni.createMapContext('myMap', this);
			// this.mapCtx.includePoints({
			// 	points: this.includePoints,
			// 	padding: [50, 50, 50, 50], // 上、右、下、左的留白区域大小，可根据需要调整
			// 	success: (res) => {
			// 		console.log('设置地图视野成功', res);
			// 	},
			// 	fail: (err) => {
			// 		console.log('设置地图视野失败', err);
			// 	},
			// 	complete: (res) => {
			// 		console.log('设置地图视野', res);
			// 	}
			// });
			this.addGroundOverlayFun();
		},
		methods: {
			bindregionchange() {
				this.mapCtx.getScale({
					success: (res) => {
						console.log('当前地图的缩放级别', res.scale);
					},
					fail: (err) => {
						console.log('设置地图视野失败', err);
					},
					complete: (res) => {
						console.log('设置地图视野', res);
					}
				})
			},
			changeImage(key) {
				//移除上一个自定义图片图层
				if (this.showImageWay === 0) {
					this.imagePoints.map((i, j) => {
						this.mapCtx.removeGroundOverlay({
							id: j + 1,
							success: (res) => {
								console.log('移除贴图成功')
							},
							fail: (err) => {
								console.log('移除贴图报错', err)
							},
							complete: (err) => {
								console.log('移除贴图', err)
							}
						});
					})
				} else {
					this.mapCtx.removeGroundOverlay({
						id: this.showImage + 1,
						success: (res) => {
							console.log('移除贴图成功')
						},
						fail: (err) => {
							console.log('移除贴图报错', err)
						},
						complete: (err) => {
							console.log('移除贴图', err)
						}
					});
				}
				this.showImage = key;
				this.addGroundOverlayFun();
			},
			addGroundOverlayFun() {
				// console.log('guideSTDPath======1111', this.$store.state.guideSTDPath,this.showImage);
				// const guideSTDPath = this.$store.state.guideSTDPath || [];
				if (this.showImageWay === 0) {
					// southwest{ longitude: 114.50531, latitude: 38.13671 }
					// northeast{ longitude: 114.52937, latitude: 38.15462 }
					const showImageUrl = this.showImage === 0 ? 'map-V2.0/map-V2.0_0' : 'map-2.5Dv3.0/map-2.5Dv3.0_0'
					this.imagePoints.map((i, index) => {
						this.mapCtx.addGroundOverlay({
							id: index + 1,
							src: `${this.img_baseUrl}/statics/std/static/${showImageUrl}${index+1}.png`, //支持网络图片、临时路径、代码包路径
							bounds: {
								//左下角,横纬竖经
								southwest: i.southwest,
								//右上角 38.153957,114.528992
								northeast: i.northeast
							},
							success: (res) => {
								console.log('贴图成功')
							},
							fail: (err) => {
								console.log('贴图报错', err)
							},
							complete: (err) => {
								console.log('贴图', err)
							}
						})
					})
				} else {
					this.mapCtx.addGroundOverlay({
						id: this.showImage + 1,
						src: this.stdImage[this.showImage], //支持网络图片、临时路径、代码包路径
						bounds: {
							//左下角,横纬竖经
							southwest: this.includePoints[0],
							//右上角 38.153957,114.528992
							northeast: this.includePoints[1]
						},
						success: (res) => {
							console.log('贴图成功')
						},
						fail: (err) => {
							console.log('贴图报错', err)
						},
						complete: (err) => {
							console.log('贴图', err)
						}
					})
				}

			},
			handleAudio(modalData) {
				this.ifplay = !this.ifplay;
				if (this.ifplay) {
					if (this.innerAudioContext) {
						if (this.innerAudioContext.paused) {
							if (this.curTime) {
								this.innerAudioContext.startTime = this.curTime
								this.innerAudioContext.play()
							} else {
								this.innerAudioContext.play()
							}
						}
					} else {
						this.initMusic(modalData)
					}
				} else {
					if (this.innerAudioContext) {
						this.innerAudioContext.pause()
						this.curTime = this.innerAudioContext.currentTime
					}
				}
			},
			handleVideo() {
				uni.hideTabBar();
				this.ifplay = false
				if (this.innerAudioContext) {
					this.innerAudioContext.pause()
					this.innerAudioContext = null;
					this.curTime = 0;
				}
				this.showVideo = true;
			},
			closeVideo() {
				uni.showTabBar();
				this.videoNew.stop();
				this.showVideo = false;
			},
			initMusic(modalData) {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = process.env.VUE_APP_BASEURL_IMG_API + modalData.soundPath;
				this.innerAudioContext.play();
			},
			pauseMusic() {
				this.ifplay = false
				if (this.innerAudioContext) {
					this.innerAudioContext.pause()
					this.innerAudioContext = null;
					this.curTime = 0;
				}
			},
			//获取导航导览分类列表
			getNavigation() {
				requestGet("/type/list", null, '/baseplatform').then(res => {
					if (res.code === 200) {
						if (res.rows && res.rows.filter(i => i.guidedStatus == 0).length > 0) {
							this.list = res.rows.filter(i => i.guidedStatus == 0);
							this.guideType = res.rows.filter(i => i.guidedStatus == 0)[0].guidedTypeId;
							this.pointLogo = res.rows.filter(i => i.guidedStatus == 0)[0].pointLogo;
							this.selectedPointLogo = res.rows.filter(i => i.guidedStatus == 0)[0]
							.selectedPointLogo;
							this.getData();
						}
					}
				})
			},
			// 点击导览分类列表
			clickGuideList(item, index) {
				this.selecteIndex = index;
				this.guideType = item.guidedTypeId;
				this.pointLogo = item.pointLogo;
				this.selectedPointLogo = item.selectedPointLogo;
				this.showModal = false;
				this.getData();
				this.pauseMusic()
			},
			// 获取marker点列表
			loadMarkers: function(markers) {
				this.pauseMusic()
				//生成 markers 列表，用于在地图上展示
				let markersData = markers.filter(marker => {
					if (this.guideType == marker.guideType) {
						return marker
					}
				});
				console.log('标的店', markersData)
				this.markers = markersData.map(marker => {
					return {
						id: marker.guideId,
						longitude: marker.guideLongitude,
						latitude: marker.guideLatitude,
						title: marker.guideTitle,
						guideInfo: marker.guideInfo,
						guideType: marker.guideType,
						linkId: marker.linkId,
						soundPath: marker.soundPath,
						videoPath: marker.videoPath,
						iconPath: process.env.VUE_APP_BASEURL_IMG_API + (marker.guideType == 7 ? marker
							.imageZoomPath : this.pointLogo),
						iconClickedPath: process.env.VUE_APP_BASEURL_IMG_API + (marker.guideType == 7 ? marker
							.imageZoomPath : this.selectedPointLogo),
						clicked: false,
						width: 40,
						height: 40,
						imageZoomPath: marker.imageZoomPath,
						imagePath: marker.imagePath
					};
				})
				console.log(this.markers, "分类标记")
				if (this.markers.length > 0) {
					this.showModal = true;
					this.modalData = this.markers[0];
					this.markers[0].clicked = true;
					if (this.markers[0].guideType != 7) {
						this.markers[0].iconPath = this.markers[0].clicked ? process.env.VUE_APP_BASEURL_IMG_API + this
							.selectedPointLogo : process.env.VUE_APP_BASEURL_IMG_API + this.pointLogo;
					}
				}
				console.log(this.modalData, "this.modalData")
			},
			// 点击标记点时触发
			markertap(e) {
				console.log('点击了这个店', e.detail);
				this.pauseMusic()
				this.ifplay = false
				if (e.detail.markerId == 0) {
					return
				}
				let _this = this
				//点击 marker 时触发，获取对应的点位信息并展示弹框
				this.markers = this.markers.map(marker => {
					if (marker.id === e.detail.markerId) {
						if (marker.guideType == 7) {
							console.log('是进入了这里11', marker, e.detail)
							_this.showModeal = true
							_this.modealImg = process.env.VUE_APP_BASEURL_IMG_API + marker.imagePath;
						} else {
							marker.iconPath = process.env.VUE_APP_BASEURL_IMG_API + this.selectedPointLogo;
						}
					} else {
						if (marker.guideType != 7) {
							marker.iconPath = process.env.VUE_APP_BASEURL_IMG_API + this.pointLogo;
						}
					}
					return marker;
				});
				let markerData = this.markers.find(marker => marker.id === e.detail.markerId);
				this.showModal = true;
				this.modalData = markerData;
			},
			//获取导航导览分类详情
			getData() {
				requestGet("/tours/list", {
					pageNum: 1,
					pageSize: 100,
					guideStatus:0
				}, '/baseplatform').then(res => {
					if (res.code === 200) {
						if (res.rows.length > 0) {
							this.loadMarkers(res.rows);
						}
					}
				})
			},
			getPhoneHeight() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.phoneHeight = `${res.statusBarHeight}px`;
					},
				});
			},
			//前往详情
			goToDetail(item) {
				console.log('点击得详情', item)
				// guideType: 1  景点详情 5 餐饮详情
				if (item.linkId == '' || !item.linkId) {
					return
				}
				if (item.guideType == 1) {
					uni.navigateTo({
						url: `/page_index/introduction/details?id=${item.linkId}&from=guide_detail`
					})
				} else if(item.guideType == 5) {
					uni.navigateTo({
						url: `/page_index/restaurant/detail?id=${item.linkId}&from=guide_detail`
					})
				} else if(item.guideType == 6) {
					uni.navigateTo({
						url: `/page_index/hotel/detail?id=${item.linkId}&from=guide_detail`
					})
				} else {
					return;
				}
			},
			videoErrorCallback(res) {
				console.log('videoErrorCallback====', res)
			},
			// 获取当前经纬度
			getCurrentLocation(again = false) {
				let that = this
				var myAmapFun = new amapFile.AMapWX({
					key: 'df436f05cea4704b8ceb44a890104987'
				});
				console.log('getRegeo===========')
				myAmapFun.getRegeo({
					success: function(data) {
						that.myPosition = data[0];
						if (again) {
							that.mapCtx.moveToLocation({
								longitude: data[0].longitude,
								latitude: data[0].latitude,
								success: (pos) => {
									console.log('goto============success', pos);
								},
								fail: (pos) => {
									console.log('goto============fail', pos);
								}
							})
						} else {

						}
					},
					fail: function(info) {
						console.log('getRegeo===========fail', info)
					}
				})
			},
		},
		onHide() {
			console.log('进入到了onHide')
			this.ifplay = false
			if (this.innerAudioContext) {
				this.innerAudioContext.pause()
				this.innerAudioContext = null;
				this.curTime = 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modealWrap {
		position: fixed;
    height: 100%;
    width: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .7);
		z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
		.modealImg {
			width: calc(100% - 48rpx);
			height: auto;
			display: flex;
      flex-direction: column;
			align-items: center;
      justify-content: center;
      margin: auto;
			.img {
				width: 100%;
        border: 4rpx solid #FFFFFF;
        border-radius: 24rpx;
			}
      .closeImg {
      	width: 80rpx;
      	height: 80rpx;
        margin-top: 20rpx;
      }
		}
	}
	
	.myPositionClass_bot {
		position: fixed;
		top: 416rpx;
		right: 32rpx;
		width: 72rpx;
		height: 72rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.16);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 48rpx;
			height: 48rpx;
			display: block;
		}
	}

	.myPositionClass {
		position: fixed;
		top: 184rpx;
		right: 32rpx;
		width: 72rpx;
		height: 208rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.16);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .item{
      width: 64rpx;
      height: 92rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text{
        font-size: 20rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.7);
        line-height: 28rpx;
      }
      image {
      	height: 48rpx;
      	width: 48rpx;
      }
    }
    .item:first-child{
      margin-top: 4rpx;
    }
    .item:last-child{
      margin-bottom: 4rpx;
    }
    .active{
      background: #F3F6F5;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      text{
        color: #3FAA73 !important;
      }
    }
		
	}

	.test {
		width: calc(100% - 64rpx);
		// height: 500rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.89) 100%);
		box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
		position: fixed;
		bottom: 24rpx;
		left: 32rpx;
		border-radius: 24rpx;

		.det_top {
			box-sizing: border-box;
			padding: 24rpx;

			.tit {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 0.8);
				line-height: 44rpx;
				margin-bottom: 8rpx;
				display: flex;
				// align-items: center;

				image {
					width: 192rpx;
					height: 192rpx;
					display: block;
					// margin-right: 16rpx;
					border-radius: 24rpx;
				}

				.tit_bot {
					flex: 1;
					margin-right: 26rpx;
				}
			}

			.dis {
				margin-bottom: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 34rpx;
				margin: 8rpx 0 26rpx;

				text {
					margin-left: 8rpx;
				}
			}

			.text {
				width: 100%;
				margin-top: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.7);
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				white-space: normal;
			}
		}

		.det_btn {
			display: flex;
			height: 64rpx;
			margin-top: 24rpx;

			.det_wrap {
				// flex: 1;
				// width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				background: #F3F6F5;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				box-sizing: border-box;
				padding: 12rpx 32rpx;
				margin-right: 24rpx;

				.jg {
					font-size: 16rpx;
					color: #B7CABF;
					margin: 0 16rpx
				}
				.activeImg {
					animation: fadenum 5s linear infinite;
				}

				@keyframes fadenum {
					0% {
						transform: rotate(0deg);
					}

					100% {
						transform: rotate(360deg);
					}
				}

				image {
					width: 32rpx;
					height: 32rpx;
					display: block;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #3FAA73;
					line-height: 40rpx;
				}
			}
		}
	}

	.guide_wrap {
		width: 100%;
		height: 100vh;
	}

	.map_wrap {
		width: 100%;
		height: calc(100% - 144rpx);

		.map {
			height: 100%;
			width: 100%;
		}
	}

	.lists_wrap {
		width: 100%;
		height: 144rpx;
		display: flex;
		// background: url('https://ltjtjingquguanli.com/statics/std/static/daolanbj.png') no-repeat;
		background-repeat: no-repeat;
		background-size: 100%;

		.lists {
			display: flex;
			box-sizing: border-box;
			padding: 16rpx 0 16rpx 48rpx;
			width: 100%;
			overflow-x: scroll;

			&::-webkit-scrollbar {
				display: none !important;
			}

			.item {
				width: 84rpx;
				margin-right: 48rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 84rpx;
					height: 84rpx;
					display: block;
					margin-bottom: 8rpx;
				}

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
					line-height: 32rpx;
				}

				.active {
					font-weight: 400;
					color: #fff;
				}
			}
		}
	}

	.ad_wrap {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		background: rgba(0, 0, 0, .5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.ad_img {
			width: 600rpx;
			height: 640rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 48rpx;

			video {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.close {
			width: 96rpx;
			height: 96rpx;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

	}

	.map {}
</style>